<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header" height="800">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="author" label="作者" width="100"></el-table-column>
                <el-table-column prop="name" label="书名" width="100"></el-table-column>
                <el-table-column prop="tags" label="标签" width="200">
                  <template #default="scope">
                    <el-tag effect="dark">{{scope.row.tags}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="intro" label="简介" width="800"></el-table-column>
                <el-table-column prop="words" label="字数" width="100">
                  <template #default="scope">
                    <el-tag>{{scope.row.words}}万字</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="chapter_num" label="总章节数" >
                  <template #default="scope">
                    <el-tag>{{scope.row.chapter_num}}章</el-tag>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts" name="export">
import { ref} from 'vue';
import * as XLSX from 'xlsx';
import {BookPage} from "../api";

interface TableItem {
    id: number;
    author:string
    name: string;
    tags: string;
    intro: string;
    kind: string;
    words: string;
    chapter_num:string
}

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
  BookPage("1","100").then(res =>{
    console.log(res)
    tableData.value = res.data.records
  })
};
getData();

// getALl();

const list = [['序号','BooKID', '作者', '书名', '标签','种类', '简介', '字数','总章数']];
const exportXlsx = () => {
    tableData.value.map((item: any, i: number) => {
      // console.log(item)
        const arr: any[] = [i + 1];
        // console.log(arr)
        arr.push(...[item.id, item.author, item.name,  item.tags,item.intro,item.kind,item.words,item.chapter_num]);

        list.push(arr);
    });
    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
    let new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
    XLSX.writeFile(new_workbook, `表格.xlsx`);
  // console.log(list)
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}


</style>
